<template>
<!-- 页面布局card通用组件 -->
<PageCard>
  <div class="searchr-container">
    <el-input placeholder="请输入要搜索的内容" v-model="searchContent">
      <el-button slot="append" icon="el-icon-search" @click="startSearch"></el-button>
    </el-input>
  </div>
  <div class="content-container">
    <div class="search-content">
      <div class="search-text" v-for="(row, index) in rows" :key="index">
        <el-link type="primary"><span v-html="row.content"></span></el-link>
      </div>
    </div>
    <div class="search-page">

    </div>
  </div>
</PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'

import { queryUserChat } from '@/api/userChat'

export default {
  components: {
    PageCard
  },
  data() {
    return {
        searchContent: "",
        rows: []
    }
  },
  methods: {
    // 搜索内容
    async startSearch() {
        const res = await queryUserChat({ keyword: this.searchContent })
        console.log(res)
        this.rows = res.data.rows
    }
  }
}
</script>
<style lang="scss" scoped>
.searchr-container {
  display: flex;
  justify-content: center;

  .el-input {
    width: 50%;

    ::v-deep .el-input__inner {
      height: 50px;
    }
  }
}

.content-container {
  display: flex;
  justify-content: center;
  padding: 20px;

  .search-content {
    width: 50%;

    .search-text {
      display: flex;
      justify-content: flex-start;
      margin-top: 25px;
      
      .el-link {
        font-size: 20px;
      }
    }
  }
}
</style>